<template>
    <div class="Page-box">
        <div class="page-search">

            <div>
                <label>出库编号</label>
                <el-input v-model="searchForm.Number" style="width:140px" placeholder="请输入编号"></el-input>
            </div>

            <div>
                <label>经办人</label>
                <el-input v-model="searchForm.RealName" style="width:140px" placeholder="请输入经办人"></el-input>
            </div>
            <div>
                <label>出库仓</label>
                <el-select v-model="searchForm.WareHouseId" placeholder="请选择仓库" style="width: 160px;">
                    <el-option v-for="item in WarehouseList" :key="item.WarehouseId" :label="item.WarehouseName" :value="item.Id"></el-option>
                </el-select>
            </div>
            <div>
                <label>状态</label>
                <el-select v-model="searchForm.Status" placeholder="请选择订单状态" style="width: 160px;">
                    <el-option label="全部" value="全部"></el-option>
                    <el-option label="待审核" value="0"></el-option>
                    <el-option label="已审核" value="1"></el-option>
                </el-select>
            </div>
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>





        <div class="page-section">
            <div class="page-tool">
                <el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
                <el-button type="danger"  plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>
            </div>
            <el-table  :data="tableData"  ref="dataForm"   v-loading="isLoading"  height="calc(100vh - 350px)" >
                <el-table-column type="selection" width="55px"></el-table-column>
                <el-table-column fixed prop="Number" label="编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column fixed prop="WareHouseName" label="出仓库" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column fixed prop="RealName" label="经办人" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Status" label="订单状态" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="Number(scope.row.Status) == '1'">已审核</el-tag>
                        <el-tag type="warning" v-else-if="Number(scope.row.Status) == '0'">未审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="ExWarehouseDate" label="出库日期" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.ExWarehouseDate | formatDateTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column  prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="操作" :show-overflow-tooltip="true" width="220">
                    <template slot-scope="scope">
                        <el-button type="text" @click="update(scope.row)" :disabled="Number(scope.row.Status) === 1">编辑</el-button>
                        <el-button type="text" @click="del(scope.row)" :disabled="Number(scope.row.Status) === 1">删除</el-button>
                        <el-button type="text" @click="details(scope.row)">明细</el-button>
                        <el-button type="text" @click="PutStatus(scope.row,1)"  :disabled="Number(scope.row.Status) === 1">审核</el-button>
                        <el-button type="text" @click="PutStatus(scope.row,0)" :disabled="Number(scope.row.Status) === 0">反审</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount"/>
        </div>

        <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible" width="60%" @close="closeDialog">
                
            <OtherExWareHouseInput :model="model" :isUpdate="isUpdate" @callback="callback" v-if="dialogDomain.dialogVisible && dialogDomain.dialogType==0 "/>
            <OtherExWareHouseDetails :isUpdate="isUpdate" @callback="callback" v-else-if="dialogDomain.dialogVisible && dialogDomain.dialogType==1 "  :model="model"/>

        </el-dialog>
       
    </div>
</template>
<script>
    import Pagination from '@/components/Pagination.vue';
    import OtherExWareHouseInput from './components/OtherExWareHouseInput.vue'
    import OtherExWareHouseDetails from './components/OtherExWareHouseDetails.vue'
   
    export default{
        components:{
            Pagination,
            OtherExWareHouseInput,
            OtherExWareHouseDetails
        },

        mounted(){
        this.dataBind();
        this.getOtherExWareHouseData();
        },

        data(){
            return{
                model:{
                    Number:'',
                    WareHouseId:'',
                    WareHouseName:'',
                    RealName:'',
                    WareHouseMode:'',
                    Status:'0',
                    WarehouseDate:'',
                    Remark:''
                },

                WarehouseList:[],
                searchForm:{
                    RealName:'',
                    WareHouseName:'',
                    Status:'',
                },

                pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0
                },

                isUpdate: false,
                isLoading: false,
                tableData: [],
                isUpdate:false,

                dialogDomain:{
                    title:'其他出库',
                    dialogVisible:false,
                    dialogType:0
                },
                

                
            }

        },

        methods:{
            //新增
            add(){
                this.dialogDomain.title = "新增其他出库"
                this.dialogDomain.dialogVisible = true;
                this.dialogDomain.dialogType=0;
                this.isUpdate = false;
            },
            //修改编辑
            update(model) {
                this.dialogDomain.title = "编辑其他出库";
                this.dialogDomain.dialogVisible = true;
                this.isUpdate = true;
                this.dialogDomain.dialogType=0;
                model.Status=model.Status.toString();
                this.model = model

            
            },
            //审核 & 反审
            PutStatus(model,Status) {
                console.log(model);
                let msg = Status==0?"确认反审该单据吗？":"确认审核该单据吗？"
                this.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    this.$http.putForm('/api/OtherExWareHouse/UpdateStatus', {
                        Id: model.Id,
                        Status: Status
                    })
                    .then((res) => {
                        this.showNotify('操作成功', 'success');
                        this.dataBind();
                    })
                }).catch(() => { });

            },
            
            //批量删除
            dels(){
            if(this.$refs.dataForm.selection.length<=0){
                this.showNotify('请先选择一项')
                return;
            }
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(()=>{
                //获取选中的表格数据 并筛选id
                var ids =this.$refs.dataForm.selection.map(x=>x.Id)

                //拼接参数
                let params =  new URLSearchParams();
                params.append('ids',ids.join(','))


                this.$http.delete('/api/OtherExWareHouse/DelAll',{
                    data:params,
                    headers:{
                        'content-Type': 'application/x-www-form-urlencoded'
                    },
                    loading:this.$loading()
                })
                .then((res)=>{
                    this.showNotify('操作成功','success');
                    this.dataBind();
                })
            }).catch(()=>{});
            },
            //删除
            del(model){
                this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    this.$http.delete('/api/OtherExWareHouse',{
                        data:{
                            id:model.Id
                        },
                        headers:{
                            'content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then((res)=>{
                        this.showNotify('操作成功','success');
                        this.dataBind();
                    })
                }).catch(()=>{});  
            },

            closeDialog(){
                this.model={
                    Number:'',
                    WareHouseId:'',
                    WareHouseName:'',
                    RealName:'',
                    WareHouseMode:'',
                    Status:'0',
                    WarehouseDate:'',
                    Remark:''
                }
            },


            //查询
            search(){
                this.pageDomain.PageIndex=1;
                this.dataBind();
            },
            //明细
            details(model){
                this.dialogDomain.title = "其他出库明细";
                this.dialogDomain.dialogVisible = true;
                this.dialogDomain.dialogType=1;
                model.Status=model.Status.toString();
                this.model = model;
            },
            //重置
            reset(){
                this.searchForm.Number='';
                this.searchForm.WareHouseId='';
                this.searchForm.RealName='';
                this.searchForm.Status='';
            },
             //新增或编辑页面回调
            callback(){
                let actionName = this.isUpdate?'编辑':'新增';
                this.showNotify(actionName+'其他出库成功','success');
                this.dialogDomain.dialogVisible=false;
                this.dataBind();
            },
             //分页方法
            handleSizeChange(val){
                this.pageDomain.PageIndex = 1;
                this.pageDomain.PageSize = val;
                this.dataBind();
            },
            handleCurrentChange(val){
                this.pageDomain.PageIndex = val;
                this.dataBind();
            },
            dataBind(){
                this.isLoading=true;
                this.$http.get('/api/OtherExWareHouse',{
                params:{
                    PageIndex:this.pageDomain.PageIndex,
                    PageSize:this.pageDomain.PageSize,
                    Number:this.searchForm.Number,
                    RealName:this.searchForm.RealName,
                    WareHouseId:this.searchForm.WareHouseId,
                    Status:this.searchForm.Status,
                    }
                })
                .then(res=>{
                    console.log(res)
                this.tableData=res.Data;
                this.pageDomain.TotalCount=res.Count;
                this.isLoading=false;
                })

            },
            getOtherExWareHouseData() {
            this.$http.get('/api/Warehouse/GetAll')
                .then(res => {
                    this.WarehouseList=res.Data;
                })
            },
        }
    }
    
</script>